<script setup lang="ts">
import { reactive, watch } from 'vue'
import { LocaleMapping } from '@/components/i18n'
import locales from '@/components/i18n/element'
import useAppStore from './store/modules/app'

const appStore = useAppStore()
const defaultLocale = LocaleMapping[appStore.language] ? locales[LocaleMapping[appStore.language]] : locales['zh-CN']
// 全局配置
const config = reactive({
  button: {
    autoInsertSpace: true,
  },
  message: {
    max: 5,
  },
  locale: defaultLocale,
})

watch(() => appStore.language, (val) => {
  config.locale.value = locales[LocaleMapping[val]] || locales['zh-CN']
})
</script>

<template>
  <!-- 使用全局配置 -->
  <el-config-provider :locale="config.locale" :button="config.button" :message="config.message">
    <router-view v-slot="{ Component }">
      <template v-if="$route.meta.keepAlive">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </template>
      <component :is="Component" v-else />
    </router-view>
  </el-config-provider>
</template>

<style lang="scss">
</style>
